<template>
  <div class="right">
    <dl class="table">
      <dt>桌台数据</dt>
      <dd>
        <div>
          <strong>{{tableList.length}}</strong>
          <span>开桌数</span>
        </div>
      </dd>
      <dd>
        <div>
          <strong>{{freeNum}}</strong>
          <span>空闲数</span>
        </div>
      </dd>
      <dd>
        <div>
          <strong>{{orderedNum}}</strong>
          <span>点餐数</span>
        </div>
      </dd>
      <dd>
        <div>
          <strong>{{payNum}}</strong>
          <span>下单数</span>
        </div>
      </dd>
    </dl>
    <div class="list">
      <h3>桌台模式</h3>
      <ul>
        <li v-for="(item) in tableList" :key="item.seat_id" :class="item.legend_class">
          <div>
            <span class="iconfont">&#xee58;</span>{{item.seat_id}}号桌
            <button @click="table=true;currentTable=item.seat_id">查看订单</button>
          </div>
          <p>
            <span>{{item.seat_legend}}</span>
            <span>{{item.people_num}}人</span>
          </p>
        </li>
        <li class="add" @click="addSeat"><span class="iconfont">&#xe608;</span></li>
        <el-drawer
          :show-close="false"
          :visible.sync="table"
          direction="rtl"
          size="25%">
          <ViewOrder v-if="table" @close="(val) =>{table = val}" :tableNum="currentTable"></ViewOrder>
        </el-drawer>
      </ul>
    </div>
  </div>
</template>

<script>
import ViewOrder from '@/components/viewOrder/viewOrder.vue'
import { getSeatInfoAPI } from '@/api/getSeatInfoAPI.js'
import { addSeatAPI } from '@/api/addSeatAPI.js'
// import { setSeatAPI } from '@/api/setSeatAPI.js'
export default {
  name: 'tableManage',
  components: {
    ViewOrder
  },
  data () {
    return {
      tableList: [],
      freeNum: 0,
      orderedNum: 0,
      payNum: 0,
      avltimer: null,
      table: false,
      currentTable: 0
    }
  },
  methods: {
    async getSeatInfo () {
      const token = localStorage.getItem('token')
      const { data: res } = await getSeatInfoAPI(token)
      this.tableList = res.data
      // this.currentTable = res.data.find(item => item.is_selected === 1).seat_id
      this.freeNum = res.data.filter(item => { return item.legend_class === '' }).length
      this.orderedNum = res.data.filter(item => { return item.legend_class === 'ordering' }).length
      this.payNum = res.data.filter(item => { return item.legend_class === 'eating' }).length
    },
    async addSeat () {
      const token = localStorage.getItem('token')
      const data = {
        seat_id: this.tableList.length + 1
      }
      await addSeatAPI(token, data)
    }
    // async viewOrder (tablenum) {
    //   const token = localStorage.getItem('token')
    //   const data = {
    //     seat_id: tablenum,
    //     is_selected: 1
    //   }
    //   await setSeatAPI(token, data)
    //   this.table = true
    // }
  },
  created () {
    this.avltimer = setInterval(() => {
      this.getSeatInfo()
    }, 50)
  },
  beforeDestroy () {
    clearInterval(this.avltimer)
    this.avltimer = null
  }
}
</script>

<style scoped>
.table{
    background: #fff;
    border-radius: 5px;
}
.table dt,.list h3{
    font-size: 20px;
    font-weight: bold;
    color: #ff8400;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    padding-left: 20px;
}
.table dd{
    display: inline-block;
    padding: 10px;
    margin-left: -5px;
}
.table dd div{
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.table dd strong{
    font-size: 24px;
    margin-bottom: 10px;
    color: #ff8400;
}
.table dd span{
    color: #aaa;
}
.table dd div:after{
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    background: linear-gradient(#fff, #ccc, #fff);
    right: 0;
}

.list{
    background: #fff;
    border-radius: 5px;
    margin-top: 20px;
}
.list ul{
    padding: 20px;
    overflow: hidden;
}
.list li{
    width: 200px;
    height: 140px;
    border: 1px solid #afafaf;
    float: left;
    border-radius: 5px;
    overflow: hidden;
    margin: 14px;
}
.list li div{
    height: 100px;
    background: #898989;
    color: #fff;
    text-align: center;
    font-size: 30px;
    line-height: 100px;

    position: relative;
    overflow: hidden;
}
.list li div span{
    font-size: 30px;
    margin-right: 12px;
}
.list li p{
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}
.list li div button{
    width: 100%;
    height: 100%;
    background: #66a8a6;
    font-size: 22px;
    color: #fff;

    position: absolute;
    left: 0;
    top: -100px;
    transition: .3s;
}
.list li.eating{
    border-color: #e5553f;
}
.list li.eating div{
    background: #e5553f;
    cursor: pointer;
}
.list li.eating p{
    color: #e5553f;
}
.list li.eating:hover button{
    top: 0;
}

.list li.ordering{
    border-color: #fc9723;
}
.list li.ordering div{
    background: #fc9723;
}
.list li.ordering p{
    color: #fc9723;
}

.list .add{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.list .add span{
    font-size: 120px;
    color: #ccc;
}
.list .add:hover{
    background: #eee;
    transition: .3s;
}
</style>
